<template>
  <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="800px"
      @close="closeDialog"
      :close-on-click-modal="false"
  >
    <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
              style="width: 100%;font-size: 12px;">
      <el-table-column label="序号" type="index" width="50">
      </el-table-column>
      <el-table-column label="名称" prop="name" width="260"   >
      </el-table-column>
      <el-table-column width="210" align="center" fixed="right" label="操作">
        <template #default="scope">

          <el-button text class="operation_bt" :icon="Edit" type="primary" @click="selectItem(scope.row)">选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 30,50, 100]"
                     :page-size="pageData.size" :pager-count="5"
                     layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                     :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import http from "@/utils/request";
import {usePageData} from "@/uses/usePageData";
import {Delete, Edit, InfoFilled} from "@element-plus/icons-vue";

const dialogVisible = ref(true)
const props = defineProps({
  queryModel: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: "选择"
  },
  width: {
    type: String,
    default: '800px'
  },
  dataType: {
    type: String,
    default: 'data'
  },
})


const emit = defineEmits(['confirm', 'cancel'])

const listData = ref([])

const searchObject =  ref({
  name:null
})

const {
  pageData,
  sizeChange,
  pageChange,
  search,
  changeTableSort,
  loading
} = usePageData(props.queryModel, searchObject.value);


const closeDialog = () => {
  emit('cancel')
}

const selectItem = (row) => {
  emit('confirm', row)
  emit('cancel')
}

</script>


<style scoped>

</style>